<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test api</title>
<script src="http://libs.baidu.com/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script src="../../scripts/raphael.js"></script>
<script src="../../scripts/FormUtil.js" charset="utf-8"></script>
<script src="../../scripts/util2.js"></script>
<script src="map.js"></script>

<script>
var area;

var w = 800;
var h = 600;

var seatw = 20;
var seath = 20;

var seatList = null;

var IDLE_COLOR = "#AA0";
var POOL_COLOR = "#999";
var SOLD_COLOR = "#000";

window.addEvents({
	'domready':function(){
		drawArea();
		loadSeatMap(7196, 7193);
	}
});

function drawArea(){
	area = new HallArea('area1', w, h);
	area.onselect=function(rect){
		
		rect.width += seatw*2;
		rect.height += seatw*2;
		rect.x -= seatw;
		rect.y -= seatw;
		
		var list = area.getSelected(rect);
		for(var i=0; i<list.length; i++){
			var sofa = list[i];
			sofa.selected  = !sofa.selected;
			sofa.repaint();
		}
	}
}

function loadSeatMap(scheduleAreaId, scheduleId){
	var url = "http://localhost/gptbs/api/tbs/schedule/areaSeats.xhtml?scheduleVenueAreaId="+scheduleAreaId+"&appkey=appkey-cc001&callMethod=api"
	ajaxRequest(url, {}, function(result){
		seatList = result.data;
		drawSeats();
		loadStatus(scheduleAreaId);
	},'get', true)
}

function drawSeats(){
	area.reset();
	for(var i=0; i<seatList.length; i++){
		var seat = seatList[i];
		var color = seat.sales=='N'?POOL_COLOR:IDLE_COLOR
		var sofa = new Sofa();
		sofa.status = 'IDLE';
		area.addToGrid(sofa, seat.y, seat.x);
		sofa.repaint();
		seat.sofa = sofa;
	}
}

function loadStatus(scheduleAreaId){
	var url = "http://localhost/gptbs/api/tbs/ticket/getSeatStatusList.xhtml?scheduleAreaId="+scheduleAreaId+"&appkey=appkey-cc001&callMethod=api"
	ajaxRequest(url, {}, function(result){
		var statusList = result.data;
		drawStatus(statusList);
	},'get')
}

function drawStatus(statusList){
	for(var i=0; i<seatList.length; i++){
		var seat = seatList[i];
		if(statusList.charAt(i)=='P'){
			seat.sofa.setStatus('POOL');
		}else if(statusList.charAt(i)=='N'){
			seat.sofa.setStatus('SOLD');
		}
	}
}

function load1(e){
	if(e!=1&&(e||window.event).keyCode!=13){
		return;
	}
	loadSeatMap($(aid).value, null);
}

var hall;
function loadHall(){
	hall = new Place('hall1', 800, 500);
	hall.display();
}
function startRecord(){
	hall.startRecordPath();
}
function stopRecord(){
	hall.stopRecordPath();
}
</script>

</head>

<body>
	<div id='pointer' style="background-color:#f0f; position:absolute; left:350px; top:200px">123456789</div>
	
	<div style="background-color: #eee; text-align:center">
        <input id="aid" name="aid" value="7196" onkeyDown="load1(event)" />
        <button onclick="load1(1)">load</button>
        <div id="area1"></div>
    </div>
    
    <hr />
    
    <div style="background-color: #eee; text-align:center">
    	<button onclick="loadHall(1)">loadHall</button>
    	<button onclick="startRecord(1)">start</button>
    	<button onclick="stopRecord(1)">stop</button>
    	<button onclick="hall.closePath();">close</button>
    	<button onclick="hall.clearPath();">clear</button>
    	<div id="hall1"></div>
    </div>
</body>
</html>
